<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* img{width:40px;} */
    </style>
    <link rel="stylesheet" href="./css/cart.css">
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <!--header开始-->
    <div class="header">
        <div class="header_cen ">
            <div class="hl fl">
                <span class="og">亲,请登录</span>
                <a href="#"><span>免费注册</span></a>
                <a href="#"><span>手机逛淘宝</span></a>
            </div>
            <div class="hr fr">
                <a href="http://localhost:3000/index.html"><span>淘宝网首页</span></a>
                <a href=""><span>我的淘宝</span></a>
                <a href=""><span>购物车</span></a>
                <a href=""><span>收藏夹</span></a>
                <a href=""><span>商品分类</span></a>
                <a href=""><span>卖家中心</span></a>
                <a href=""><span>联系客服</span></a>
                <a href=""><span>网站导航</span></a>
            </div>
        </div>
    </div>
    <!--header结束-->
    <!-- <div class="head"> -->
    <div class="head">
        <div class="bag">
            <img src="./img/logo1.png" alt="">
            <h1><em>购物车</em></h1>
        </div>
        <div class="head_right">
            <div class="head_top"> <span> 你好，******* </span>
                <img src="./img/head1.png" id="head1">
                <span> [退出] </span>
                <span>订单管理 |</span>
                <span><img src="./img/head2.png"> 400-6789-888 | </span>
                <span><img src="./img/head3.png"> 在线客服 | </span>
                <img src="./img/head4.png" alt="">
                <select name="" id="">
                    <option value=""><img src="./img/head4.png" alt="">会员 服务</option>
                    <option value="">帮助中心</option>
                    <option value="">会员反馈</option>
                    <option value="">会员俱乐部</option>
                </select>
            </div>
            <div class="head_bottom">
                <img src="./img/对号.png">
                <span>100%正品保证</span>
                <img src="./img/7.png">
                <span>七天无理由放心退</span>
                <img src="./img/_shizhong.png">
                <span>限时抢购</span>
            </div>
        </div>
    </div>
    <hr>
    <div class="special">
        <span><a href="./list.html">继续购物 &gt;&gt;</a></span>
        <!-- <p>配送至&nbsp; <strong>广州市</strong>&nbsp; | &nbsp;<em>勾选商品“ <img src="./img/勾选.png"> ”即可锁定库存不用担心商品被抢走～</em></p> -->
        <hr>
        
    </div>
	
	
   <!-- <h2>这是购物车</h2>
    <a href="./list.html">继续购物</a> -->
    <table border="1" cellspacing="0" width="800">
        <thead>
            <tr>
                <th>选中</th>
                <th>图片</th>
                <th>名称</th>
                <th>数量</th>
                <th>价格</th>
                <th>小计</th>
                <th>删除</th>
                <th>加入收藏</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <tr>
                <td align="right"><input type="checkbox" class="allCheck"></td>
                <td>全选</td>
                <td align="right">总数量</td>
                <td class="allNum">0</td>
                <td align="right">总价</td>
                <td class="allPrice">0</td>
                <td class="removeCheck">删除选中</td>
                <td class="payment">结算</td>
            </tr>
        </tfoot>
    </table>
	<div class="images">
	    <img src="./img/foot1.png" alt="">
	    <img src="./img/foot2.png" alt="">
	    <img src="./img/foot3.png" alt="">
	</div>
	<!-- main结束 -->
	
	<!-- footer -->
	<div class="footer">
	    <ul>
	        <li><a href="#">阿里巴巴集团</a></li>
	        <li><a href="#">淘宝网</a></li>
	        <li><a href="#">天猫</a></li>
	        <li><a href="#">聚划算</a></li>
	        <li><a href="#">全球速卖通</a></li>
	        <li><a href="#">阿里巴巴国际交易市场</a></li>
	        <li><a href="#">1688</a></li>
	        <li><a href="#">阿里妈妈</a></li>
	        <li><a href="#">飞猪</a></li>
	        <li><a href="#">淘小铺</a></li>
	        <li><a href="#">阿里云计算</a></li>
	        <li><a href="#">AliOS</a></li>
	        <li><a href="#">阿里通信</a></li>
	        <li><a href="#">一淘</a></li>
	        <li><a href="#">万网</a></li>
	        <li><a href="#">高德</a></li>
	        <li><a href="#">UC</a></li>
	        <li><a href="#">友盟</a></li>
	        <li><a href="#">阿里安全虾米</a></li>
	        <li><a href="#">大麦网</a></li>
	        <li><a href="#">钉钉</a></li>
	        <li><a href="#">支付宝</a></li>
	        <li><a href="#">优酷</a></li>
	        <li><a href="#">土豆</a></li>
	        <li><a href="#">阿里健康</a></li>
	        <li><a href="#">阿里影业</a></li>
	        <li><a href="#">阿里体育</a></li>
	        <li><a href="#">网商银行</a></li>
	    </ul>
	</div>
	<div class="last">
	    <ul>
	        <li><a href="#">关于淘宝</a></li>
	        <li><a href="#">合作伙伴</a></li>
	        <li><a href="#">营销中心</a></li>
	        <li><a href="#">廉正举报</a></li>
	        <li><a href="#">联系客服</a></li>
	        <li><a href="#">开放平台</a></li>
	        <li><a href="#">诚征英才</a></li>
	        <li><a href="#">联系我们</a></li>
	        <li><a href="#">网站地图</a></li>
	        <li><a href="#">隐私权政策</a></li>
	        <li><a href="#">法律声明</a></li>
	        <li><a href="#">知识产权</a></li>
	        <li><a href="#">版权所有</a></li>
	        <span>© 2003-现在 Taobao.com 版权所有</span>
	        <li><a href="#">增值电信业务经营许可证：浙B2-20080224</a></li>
	        <li><a href="#">增值电信业务经营许可证（跨地区）： B2-20150210</a></li>
	        <span>浙网文（2019）1033-086号</span>
	        <span>浙江省网络食品销售第三方平台提供者备案：浙网食A33010001</span>
	        <span>互联网药品信息服务资格证书（浙）-经营性-2018-0010</span>
	        <span>短消息类服务接入代码使用证书：号【2016】00154-A01</span>
	        <span>信息网络传播视听许可证：1109364号</span>
	        <span>出版物网络交易平台服务经营备案号：新出发浙备字第002号</span>
	        <span>浙公网安备 33010002000078号</span>
	        <span>广播电视节目制作经营许可证（浙）字第01012号</span>
	        <span>市场名称登记证：工商网市字3301004120号</span>
	        <span>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00004号</span>
	    </ul>
	</div>
	
	
</body>
<script src="./js/ajax.js"></script>
<script>

    const tbody = document.querySelector("tbody");

    let goods = localStorage.getItem("goods");
    goods = goods ? JSON.parse(goods) : [];

    const pArr = [];

    // 遍历本地存储中获取到的数据
    // 根据id开启ajax请求
    // 并保存ajax请求开启之后的promise实例
    goods.forEach(val=>{
		console.log(val)
        pArr.push(ajaxPromise("http://localhost:3000/getDetail?Id=" + val.Id));
    })

    // 利用Promise的批处理，处理所有请求
    Promise.all(pArr).then(res=>{
        // 因为后端给的数据是json字符，所以解析promise获取到的数据
        const arr = res.map(val=>{
			console.log(val)
            return JSON.parse(val).data;
        })
        // 最终处理之后的数据
        console.log(arr);
        // 根据数据，渲染页面
        let str = "";
        arr.forEach((val,idx)=>{
			console.log(val)
            str += `<tr myid="${val.Id}">
                        <td><input type="checkbox" class="check" ${goods[idx].check ? 'checked' : ''}></td>
                        <td><img src="${val.img_001}"></td>
                        <td>${val.name}</td>
                        <td><input type="number" value="${goods[idx].num}" class="num"></td>
                        <td class="price">${val.price}</td>
                        <td>${val.price * goods[idx].num}</td>
                        <td class="remove">删除</td>
                        <td onclick="collection();">收藏</td>
                    </tr>`
        })
        tbody.innerHTML = str
    })

    // ========

    // 修改并记录选中状态
    tbody.addEventListener("change", function(eve){
        const e = eve || window.event;
        const target = e.target || e.srcElement;
        if(target.className.includes("check")){
            const Id = target.parentNode.parentNode.getAttribute("myid");
            const check = target.checked;

            let i;
            goods.some((val,idx)=>{
                i = idx;
                return val.Id === Id
            })

            goods[i].check = check;

            localStorage.setItem("goods", JSON.stringify(goods));

            $(".allCheck").checked = goods.every(val=>val.check);

            // 计算总数量
            $(".allNum").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num : 0), 0);

            // 计算总价
            $(".allPrice").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num : 0), 0)*4190;
			// $(".allPrice").innerHTML =""
        }
    })

    // 修改并记录数量
    tbody.addEventListener("change", function(eve){
        const e = eve || window.event;
        const target = e.target || e.srcElement;
        if(target.className.includes("num")){
            const Id = target.parentNode.parentNode.getAttribute("myid");
            const num = target.value-0;

            let i;
            goods.some((val,idx)=>{
                i = idx;
                return val.Id === Id
            })

            goods[i].num = num;

            localStorage.setItem("goods", JSON.stringify(goods));

            // 计算总数量
            $(".allNum").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num : 0), 0);

            // 计算总价
            $(".allPrice").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num : 0), 0)*4190;
        }
    })

    // 删除DOM并修改数据
    tbody.addEventListener("click", function(eve){
        const e = eve || window.event;
        const target = e.target || e.srcElement;
        if(target.className.includes("remove")){
            const Id = target.parentNode.getAttribute("myid");
            target.parentNode.remove();

            let i;
            goods.some((val,idx)=>{
                i = idx;
                return val.Id === Id
            })

            goods.splice(i, 1);

            localStorage.setItem("goods", JSON.stringify(goods));

            $(".allCheck").checked = goods.every(val=>val.check);

            // 计算总数量
            $(".allNum").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num : 0), 0);

            // 计算总价
            $(".allPrice").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num : 0), 0)*4190;
        }
    })

    // 如果所有商品都被选中了，全选默认选中
    $(".allCheck").checked = goods.every(val=>val.check);

    // 全选按钮影响单个商品的选中
    $(".allCheck").onclick = function(){
        const all = document.querySelectorAll(".check");
        [...all].forEach(val=>{
            val.checked = this.checked;
        })
        goods.forEach(val=>{
            val.check = this.checked;
        })
        localStorage.setItem("goods", JSON.stringify(goods));

        // 计算总数量
        $(".allNum").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num : 0), 0);

        // 计算总价
        $(".allPrice").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num : 0), 0)*4190;
    }

    // 计算总数量
    $(".allNum").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num : 0), 0);


    // 计算总价
    $(".allPrice").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num : 0), 0)*4190;


    // 删除选中
    $(".removeCheck").onclick = function(){
        goods = goods.filter(val=>!val.check);

        const all = document.querySelectorAll(".check");
        [...all].forEach(val=>{
            if(val.checked){
                val.parentNode.parentNode.remove();
            }
        })

        localStorage.setItem("goods", JSON.stringify(goods));

        // 计算总数量
        $(".allNum").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num : 0), 0);

        // 计算总价
        $(".allPrice").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num : 0), 0)*4190;
    }

    


    function $(s){
        return document.querySelector(s);
    }

    //支付按钮
    $(".payment").onclick = function(){
        var flag = confirm("商品详情单，请确认商品信息");
        if(flag){
            alert("您已经成功下单并结算");
            goods = goods.filter(val=>!val.check);

            const all = document.querySelectorAll(".check");
            [...all].forEach(val=>{
                if(val.checked){
                     val.parentNode.parentNode.remove();
                 }
            })

            localStorage.setItem("goods", JSON.stringify(goods));

            // 计算总数量
            $(".allNum").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num : 0), 0);

            // 计算总价
            $(".allPrice").innerHTML = goods.reduce((prev,val)=>prev + (val.check ? val.num : 0), 0)*4190;
        }
    }

    function collection(){
        var flag = confirm("你是否要将商品进行收藏？");
        if(flag){
            alert("已将商品收藏");
        }else{
            alert("因你点击了取消按钮，没有将商品进行收藏");
        }
    }
</script>
</html>